<template>
    <div class="van-uploader">
        <div class="van-uploader__wrapper">
            <div v-for="(item,index) in imgList" :key="index">
                <div class="van-uploader__preview" v-if="item.path !==''">
                    <div class="van-image van-uploader__preview-image">
                        <img :src="item.path"
                             class="van-image__img"
                             style="object-fit: cover;">
                    </div>
                    <i class="van-icon van-icon-delete van-uploader__preview-delete" @click="del(index)"><!----></i>
                </div>
                <div class="van-uploader__upload" v-if="item.path===''" @click="selectImg(index)">
                    <i class="van-icon van-icon-plus van-uploader__upload-icon"></i>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'UploaderImg',
  data () {
    return {
      imgList: []
    }
  },
  props: {
    num: {
      type: Number,
      default: () => {
        return 1
      }
    }
  },
  mounted () {
    for (let i = 0; i < this.num; i++) {
      this.imgList.push({ path: '' })
    }
  },
  methods: {
    del (index) {
      this.imgList[index].path = ''
      this.$emit('result', this.imgList)
    },
    selectImg (index) {
      let _this = this
      this.$common.wxUploadImg({
        success: function (ret) {
          _this.imgList[index].path = ret.result
          _this.$emit('result', _this.imgList)
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
